<template>
  <div>
    <el-card>
      <CategorySelect></CategorySelect>
    </el-card>
    <el-card style="margin-top: 20px;">
      <SpuList v-if="showStatus === 0" @changeStatus="changeStatus"></SpuList>
      <SpuForm v-else-if="showStatus === 1" @changeStatus="changeStatus" :spuInfo="spuInfo"></SpuForm>
      <SkuForm v-else></SkuForm>
    </el-card>
  </div>
</template>

<script>
import CategorySelect from '@/components/CategorySelect/index.vue'
import SpuList from './spuList/index.vue'
import SpuForm from './spuForm/index.vue'
import SkuForm from './skuForm/index.vue'
export default {
  name: 'Spu',
  data() {
    return {
      showStatus: 0,
      spuInfo:{
        category3Id: '',
        description: '',
        tmId: '',
        spuName: '',
        spuImageList: [],
        spuSaleAttrList: [],
      }
    }
  },
  components: {
    CategorySelect,
    SpuList,
    SpuForm,
    SkuForm
  },
  methods: {
    changeStatus(num, row) {
      if (row) {//点击修改进入spuForm的
        this.spuInfo = {...row}
      } else {
        this.spuInfo = {
          category3Id: '',
          description: '',
          tmId: '',
          spuName: '',
          spuImageList: [],
          spuSaleAttrList: [],
        }
      }
      this.showStatus = num
    }
  },
}
</script>

<style lang="less" scoped>

</style>
